﻿
<script type="text/javascript">
    $('.chzn-drop').css('left', '0px');
    $('.chzn-drop').css('display', 'none');
    $('.chzn-single').on("click", function (e) {
        $(this).toggleClass('chzn-single-with-drop');
        $(this).next().toggleClass('visible');
        e.preventDefault();
    });
</script>

<style>
    table{
        font-size:16px;
    }
    .lsk-header{
            height: 75px;
            background-color: #df4a43;
            color: white;
            font-size: 18px;
            margin-top:5px;
            margin-bottom:5px;
    }


    .visible {
        display: block !important;
    }

    .chzn-results li:hover {
        background-color: #df4a43;
        color: white;
    }

    .form-group {
        width: 89%;
        text-align: left;
        margin: 0 auto;
    }

    .btn-fullcolor {
        width: 150px;
    }

    .table-active{
            max-height: 1300px!important;
    }

    @media only screen and (max-width: 990px) {
        h3{
            font-size: 17px!important;
        }
    }

    .pattern-bg{
        background-image: url("../images/banners/Calculator/rpgt-calc.jpg");
        background-size: cover;
    }

    .pattern-bg.colored-bg:before{
        background-color: rgba(0,0,0,0.6);
    }

    #advanced-search.open .container {
       max-height: 100%!important;
    }



</style>

<!-- BEGIN PAGE TITLE/BREADCRUMB -->
<div class="parallax colored-bg pattern-bg" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="page-title">RPGT Calculator</h1>

                <!--<ul class="breadcrumb">
                    <li><a href="index.html">Home </a></li>
                    <li><a href="#">Properties</a></li>
                    <li><a href="properties-grid.html">Property Grid Listing</a></li>
                </ul>-->
            </div>
        </div>
    </div>
</div>
<!-- END PAGE TITLE/BREADCRUMB -->
<!-- BEGIN HOME ADVANCED SEARCH (class="gray" for a gray background) -->

<div id="advanced-search" class="gray open" style="height:100%;overflow: hidden;">

    <div ng-class="{ 'table-activebut': calFinish == true }" class="container" style="width:100%">
        <div class="alert alert-warning" ng-show="warning">
            <button type="button" class="close" ng-click="close()" aria-hidden="true">&times;</button>
            <ul ng-repeat="msg in warning">
                <li class="glyphicon glyphicon-warning-sign">{{msg.msg}}</li>
            </ul>
        </div>
        <div class="alert alert-danger" ng-show="error">
            <button type="button" class="close" ng-click="close()" aria-hidden="true">&times;</button>
            <span class="glyphicon glyphicon-ban-circle"></span>
            <span>{{error}}</span>
        </div>

        <div class="alert alert-info" ng-show="info">
            <button type="button" class="close" ng-click="close()" aria-hidden="true">&times;</button>
            <span class="glyphicon glyphicon-ban-circle"></span>
            <span>{{info}}</span>
        </div>

        <div class="row">
            <h3 style="max-width: 70%;margin: 0 auto;margin-top: 20px;font-size:17px;">
                For specific advice on legal, financial or real estate matters, you should always seek the advice of a professional who is licensed and knowledgeable in that area, such as an attorney, accountant,real estate agent or Banker.
            </h3>
        </div>

        <form class="row">


            <table style="display: inline-block;width: 35em;vertical-align: top;margin:0 auto;">
                <tbody>
                    <tr>

                        <td class="col-sm-2">
                            <label>Purchase Price (RM)</label>
                        </td>

                        <td class="col-sm-10">

                            <input id="txtPropertyPrie" type="number" placeholder="Purchase Price" class="form-control" ng-model="propertyPrice" tabindex="6" style="width: 100%" />

                        </td>

                    </tr>
                    <tr>

                        <td class="col-sm-2">
                            <label>Selling Price (RM)</label>
                        </td>

                        <td class="col-sm-10">

                            <input id="txtSellingPrice" type="number" placeholder="Selling Price" class="form-control" ng-model="sellingPrice" tabindex="6" style="width: 100%" />

                        </td>

                    </tr>
                    <tr>

                        <td class="col-sm-2">
                            <label>Holding Period (year)</label>
                        </td>

                        <td class="col-sm-10">
                            <input id="txtHoldingYear" type="number" class="form-control" placeholder="Holding Year" ng-model="holdingYear" tabindex="6" style="width: 100%" />

                        </td>

                    </tr>


                    <tr class="lsk-header">
                        <td class="col-sm-2" colspan="2" style="border-bottom:solid;border-top:solid; vertical-align: inherit;">
                            Allowable Expenses
                        </td>
                    </tr>
                    <tr>

                        <td style="padding-top: 20px;" class="col-sm-2">
                            <label>Legal Fee (RM)</label>
                        </td>

                        <td style="padding-top: 20px;" class="col-sm-10">

                            <input id="txtLegalFee" type="number" class="form-control" placeholder="Legal Fee" ng-model="legalFee" tabindex="6" style="width: 100%" ng-change="totalExpenses()" />

                        </td>

                    </tr>
                    <tr>

                        <td class="col-sm-2">
                            <label>Agent Commission (RM)</label>
                        </td>

                        <td class="col-sm-10">

                            <input id="txtAgentCommission" type="number" class="form-control" placeholder="Agent Commission" ng-model="agentCommission" tabindex="6" style="width: 100%" ng-change="totalExpenses()" />

                        </td>

                    </tr>
                    <tr>

                        <td class="col-sm-2">
                            <label>Administrative Fee (RM)</label>
                        </td>

                        <td class="col-sm-10">

                            <input id="txtLegalFee" type="number" class="form-control" placeholder="Administrative Fee" ng-model="administrationFee" tabindex="6" style="width: 100%" ng-change="totalExpenses()" />

                        </td>

                    </tr>
                    <tr>

                        <td class="col-sm-2">
                            <label>Repair & Renovation (RM)</label>
                        </td>

                        <td class="col-sm-10">

                            <input id="txtLegalFee" type="number" class="form-control" placeholder="Repair & Renovation" ng-model="repairFee" tabindex="6" style="width: 100%" ng-change="totalExpenses()" />

                        </td>

                    </tr>
                    <tr>

                        <td class="col-sm-2">
                            <label>Other (RM)</label>
                        </td>

                        <td class="col-sm-10">

                            <input id="txtLegalFee" type="number" class="form-control" placeholder="Other" ng-model="other" tabindex="6" style="width: 100%" ng-change="totalExpenses()" />

                        </td>

                    </tr>

                    <tr>

                        <td class="col-sm-2" style="">
                            <label style="color:red">Total Expenses </label>
                        </td>

                        <td class="col-sm-10">

                            <input id="txtLegalFee" type="number" class="form-control" ng-model="totalExpensesFee" ng-init="0" disabled style="color:red;width: 100%" ng-change="totalExpenses()" />

                        </td>

                    </tr>
                    <tr>

                        <td>


                            <!--<button id="btnCalculate" type="button" class="btn waves-effect waves-light subscribe-submit" ng-click="calculate()">Calculate</button>-->
                        </td>
                        <td>
                            <a class="btn btn-danger" style="padding-left: 25px;
                                                    padding-right: 25px;
                                                    background-color: transparent!important;
                                                    color: #df4a43!important;
                                                    border: 2px solid #df4a43;line-height:2.3;
                                                    font-size: 1em;" ng-click="calculate()">Calculate</a>
                        </td>
                    </tr>



                </tbody>

            </table>







        </form>




        <div id="result" ng-show="calFinish" style="overflow-x: scroll;">
            <table id='tblRpgt' class="table table-striped table-hover table-bordered">
                <tbody>
                    <tr>
                        <td></td>
                        <td>
                            <h3>Malaysian Citizen/PR</h3>
                        </td>
                        <td>
                            <h3>Company</h3>
                        </td>
                        <td>
                            <h3>Non Citizen/Non-PR</h3>
                        </td>

                    </tr>

                    <tr>
                        <td>
                            Year of ownership
                        </td>
                        <td>
                            {{holdingYear}}
                        </td>
                        <td>
                            {{holdingYear}}
                        </td>
                        <td>
                            {{holdingYear}}
                        </td>

                    </tr>
                    <tr>
                        <td>
                            Gross Property Gain (RM)
                        </td>
                        <td>
                            {{sellingPrice - propertyPrice -totalExpensesFee}}
                        </td>
                        <td>{{sellingPrice - propertyPrice -totalExpensesFee}}</td>
                        <td>{{sellingPrice - propertyPrice -totalExpensesFee}}</td>

                    </tr>
                    <tr>
                        <td>
                            Exemption Waiver (RM)
                        </td>
                        <td>{{exemptionWaiver1}}</td>
                        <td>0</td>
                        <td>0</td>

                    </tr>
                    <tr>
                        <td>
                            RPGT Rate (%)
                        </td>
                        <td> {{rpgtRate1}}</td>
                        <td>{{rpgtRate2}}</td>
                        <td> {{rpgtRate3}}</td>

                    </tr>
                    <tr style="color:red">
                        <td>
                            RPGT Payable (RM)
                        </td>
                        <td> {{rpgt1}}</td>
                        <td>{{rpgt2}}</td>
                        <td> {{rpgt3}}</td>

                    </tr>
                    <tr style="color:red">
                        <td>
                            Net Property Gain (RM)
                        </td>
                        <td> {{netGain1}}</td>
                        <td>{{netGain2}}</td>
                        <td>{{netGain3}}</td>

                    </tr>
                </tbody>
            </table>
        </div>

        <div class="row">
            <div class="col-md-12" style="margin:25px 0px;font-size:17px;">
                <h3 style="font-size:17px;">
                Note : Exclude disbursement fee, GST, service tax, and other misc charge. Please consult with your lawyer for more precise details.
                </h3>

            </div>
        </div>

        <!-- END HOME ADVANCED SEARCH -->
        <!-- BEGIN CONTENT WRAPPER -->
        <!--<div class="content">
            <div class="container">
                <div class="row">

                    <div class="main col-sm-12">


                        <h3> Search results </h3>
                        <table class="table table-striped table-hover table-bordered">
                            <thead>
                                <tr>
                                    <th>Address</th>
                                    <th>Project Name</th>
                                    <th>Price</th>
                                    <th>Land Type</th>
                                    <th>Property Type</th>
                                    <th>Land(m.sq)</th>
                                    <th>Build Up(m.sq)</th>
                                    <th>Trasaction Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="obj in objects | filter : paginate">
                                    <td>{{obj.Alamat}}</td>
                                    <td>{{obj.Daerah}}</td>
                                    <td>{{obj.Price}}</td>
                                    <td>{{obj.LandType}}</td>
                                    <td>{{obj.PropertyType}}</td>
                                    <td>{{obj.Land}}</td>
                                    <td>{{obj.BuildUp}}</td>
                                    <td>{{obj.TransactionDate | date:"MM/dd/yyyy"}}</td>
                                </tr>
                            </tbody>
                        </table>

                        <!--<div lskpagination total-items="totalItems" ng-model="currentPage"
                                        max-size="5" boundary-links="true"
                                        items-per-page="numPerPage" class="pagination-sm">
                        </div>-->
        <!--<ul uib-pagination  boundary-links="true" total-items="totalItems" ng-model="currentPage" num-pages="numPerPage"></ul>-->
        <!--<lskpagination num-pages="numPerPage" current-page="currentPage" class="pagination-small"></lskpagination>-->
        <!--<div>
            <table ng-table="tableParams" class="table table-striped" show-filter="true">
                <tr ng-repeat="data in $data">
                    <td data-title="'Address'" sortable="'Address'" class="col-md-2" filter="{ 'Address': 'text'}">{{data.Alamat}}</td>
                    <td data-title="'Project Name'" sortable="'Kawasan'" class="col-md-2" filter="{ 'Kawasan': 'text'}">{{data.Kawasan}}</td>
                    <td data-title="'Price'" sortable="'Price'" align="center" class="col-md-1" filter="{ 'Price': 'text'}">{{data.Price | number}}</td>
                    <td data-title="'Land Type'" sortable="'LandType'" class="col-md-1" filter="{ 'LandType': 'text'}">{{data.LandType}}</td>
                    <td data-title="'Property Type'" sortable="'PropertyType'" class="col-md-1" filter="{ 'PropertyType': 'text'}">{{data.PropertyType}}</td>
                    <td data-title="'Land Area(m.sq)'" sortable="'Land'" align="center" class="col-md-1" filter="{ 'Land': 'text'}">{{data.Land}}</td>
                    <td data-title="'Build Up(m.sq)'" sortable="'BuildUp'" align="center" class="col-md-1" filter="{ 'BuildUp': 'text'}">{{data.BuildUp}}</td>
                    <td data-title="'Transaction Date'" sortable="'TransactionDate'" align="right" class="col-md-1" filter="{ 'TransactionDate': 'text'}">{{data.TransactionDate  | date:"MM/dd/yyyy"}}</td>
                </tr>
                <tr>
                    <td><strong>Count per page:</strong> {{tableParams.count()}}</td>
                    <td colspan="8" align="right">
                        <p><strong>Page:</strong> {{tableParams.page()}} </p>
                    </td>
                </tr>

            </table>
        </div>-->

    </div>


        </div>
    </div>
</div>
<!-- END CONTENT WRAPPER -->